<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>章鱼的相册墙</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="Free HTML5 Template by FREEHTML5.CO" />
		<meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />

		<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
		<link rel="shortcut icon" href="favicon.ico" th:href="@{/favicon.ico}">

		<!-- Google Webfonts -->
		<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

		<!-- Animate.css -->
		<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
		<!-- Icomoon Icon Fonts-->
		<link rel="stylesheet" href="../css/icomoon.css" th:href="@{/css/icomoon.css}">
		<!-- Magnific Popup -->
		<link rel="stylesheet" href="../css/magnific-popup.css" th:href="@{/css/magnific-popup.css}">
		<!-- Salvattore -->
		<link rel="stylesheet" href="../css/salvattore.css" th:href="@{/css/salvattore.css}">
		<!-- Theme Style -->
		<link rel="stylesheet" href="../css/style.css" th:href="@{/css/style.css}">
		<!-- layui Style -->
		<link rel="stylesheet" href="../layui/css/layui.css" th:href="@{/layui/css/layui.css}">
		<!-- Modernizr JS -->
		<script src="https://cdn.bootcss.com/modernizr/2.8.0/modernizr.min.js"></script>
		<!-- FOR IE9 below -->
		<!--[if lt IE 9]>
		<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->

	</head>
	<body>

		<div id="fh5co-offcanvass">
			<a href="javascript:;" class="fh5co-offcanvass-close js-fh5co-offcanvass-close">Menu <i class="icon-cross"></i> </a>
			<h1 class="fh5co-logo"><a class="navbar-brand" href="/image/listpage">Yujia.Z</a></h1>
			<ul>
				<li class="active"><a href="/image/listpage">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Pricing</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			<h3 class="fh5co-lead">Connect with us</h3>
			<p class="fh5co-social-icons">
				<a href="#"><i class="icon-twitter"></i></a>
				<a href="#"><i class="icon-facebook"></i></a>
				<a href="#"><i class="icon-instagram"></i></a>
				<a href="#"><i class="icon-dribbble"></i></a>
				<a href="#"><i class="icon-youtube"></i></a>
			</p>
		</div>
		<header id="fh5co-header" role="banner">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<a href="#" class="fh5co-menu-btn js-fh5co-menu-btn">Menu <i class="icon-menu"></i></a>
						<a class="navbar-brand" href="/image/listpage">Yujia.Z</a>
					</div>
				</div>
			</div>
		</header>
		<!-- END .header -->

		<div id="fh5co-main">
			<div class="container">
				<div class="row">
					<div id="fh5co-board" data-columns>
						<!-- 遍历生成图片 -->
						<div class="item" th:each="image : ${images}" th:if="${images} != null">
							<div class="animate-box">
								<a href="#" th:href="${image.url}" class="image-popup fh5co-board-img" title="default" th:title="${image.title}">
									<img src="loading.gif" th:src="@{/images/loading.gif}" th:data-original="${image.url}+'?imageView2/2/w/400/h/450/q/100|imageslim'" alt="Free HTML5 Bootstrap template">
								</a>
							</div>
							<div class="fh5co-desc" th:text="${image.title}"></div>
						</div>

					</div>
				</div>
		   </div>
		</div>

		<footer id="fh5co-footer">
			<div class="container">
				<div class="row row-padded">
					<div class="col-md-12 text-center">
						<p class="fh5co-social-icons">
							<a href="#"><i class="icon-twitter"></i></a>
							<a href="#"><i class="icon-facebook"></i></a>
							<a href="#"><i class="icon-instagram"></i></a>
							<a href="#"><i class="icon-dribbble"></i></a>
							<a href="#"><i class="icon-youtube"></i></a>
						</p>
						<p><small>&copy; Yujia.Z <---> All Rights Reserved.</small></p>
					</div>
				</div>
			</div>
		</footer>

		<!-- jQuery -->
		<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
		<!-- jQuery Easing -->
		<script src="https://cdn.bootcss.com/jquery-easing/1.4.0/jquery.easing.min.js"></script>
		<!-- Bootstrap -->
		<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
		<!-- Waypoints -->
		<script src="https://cdn.bootcss.com/waypoints/4.0.1/jquery.waypoints.min.js"></script>
		<!-- Magnific Popup -->
		<script src="https://cdn.bootcss.com/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
		<!-- Salvattore -->
		<script src="https://cdn.bootcss.com/salvattore/1.0.8/salvattore.min.js"></script>
		<!-- Main JS -->
		<script src="../js/main.js" th:src="@{/js/main.js}"></script>

		<script type="text/javascript" src="jquery.masonry.min.js" th:src="@{/js/jquery.masonry.min.js}"></script>
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
		<script>
            $(function() {

                //f_masonry();

				// 懒加载
                $("img").lazyload({
                    effect:"fadeIn",
                    failurelimit:10,
                    //load:f_masonry,	// 回调函数
                });
            });

            // 瀑布流布局
            function f_masonry() {
                $('.masonry').masonry({
                    gutterWidth: 20,
                    itemSelector: '.item',
                    isAnimated: true,
                });
            }

		</script>

		<!-- layui -->
		<script src="../layui/layui.js" th:src="@{/layui/layui.js}"></script>
	</body>
</html>

<script type="text/javascript">
    layui.config({
        base : "../../js/"
    }).use(['util'],function() {
        var util = layui.util;
        
        //回到顶部按钮
        util.fixbar({
            top: true
            , click: function (type) {
                if (type === 'top') {
                    //layer.msg('点击了top');
                }
            }
        });
    })
</script>